<template>
  <van-swipe @change="onChange" :autoplay="autoPlayTime">
    <van-swipe-item v-for="(list,index) in swipeInfo"  :key="index">
      <img :src="list.img_src" :width="srceenWidth" @click="jumpPage(list.type,list.link)">
    </van-swipe-item>

    <div class="custom-indicator" slot="indicator">
      <div class="spanGroup">
        <span v-for="(list,index) in getSwipeLength()" :key="index"
              :class="(newImgIndex===index)?'isActive':'indicator'"></span>
      </div>
      </div>
  </van-swipe>
</template>

<script>
    export default {
      name: "productSwipe",
      props:{
        swipeInfo:{},
        srceenWidth:Number,
      },
      data() {
        return {
          imgIndex:0,
          autoPlayTime:3000,
        }
      },
      computed:{
        newImgIndex:{
          get:function () {
            return this.imgIndex;
          },
          set:function () {}
        },
        lang:{
          get(){
            let storageData = window.sessionStorage.getItem('lang');
            if(this.$store.state.lang!==storageData){
              this.$store.dispatch('toChangeLang', storageData);    //同步操作
            }
            return this.$store.getters.getLang;
          },
          set(){}
        }

      },
      methods: {
        jumpPage(type,link){
          if(type==='link'){
            window.open(link);
          }else{
            this.$store.dispatch('toChangeProductIndexId', link);
            this.getProductInfoJson(link);
          }
        },
        onChange(index) {
          this.imgIndex=index;
        },
        getSwipeLength(){
          if(this.swipeInfo!= undefined && this.swipeInfo != null){
            return this.swipeInfo.length;
          }
        },
        getProductInfoJson(id){
          this.$store.dispatch('toChangeLoadIngVisible',true);
          let _this=this;
          this.axios.get(domain.url+'product/api/get_product', {
            params: {
              id:parseInt(id),
              language:_this.lang,
              equipment:'mobile'
            }
          })
            .then(function (response) {
              _this.$store.dispatch('toChangeProductIndexId',parseInt(id));
              _this.$store.dispatch('toChangeProductInfo',response.data);
              _this.$store.dispatch('toChangeNowPage','/');
              _this.$store.dispatch('toChangeCurrentPageText',response.data.product.title);
              _this.$router.push('/');
            })
            .catch(function (error) {
              console.log(error);
            });
        },
      }
    }
</script>

<style scoped>
  .custom-indicator{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .spanGroup{
    width:100%;
    text-align: center;
    z-index:1000;
  }
  .custom-indicator span{
    margin-left:5px;
    margin-right:5px;
    margin-top: -20px;
    display: inline-block;
    position: relative;
  }
  .van-swipe-item img{
    font-size:0;
    display: block;
  }
.indicator{
  display: inline-block;
  width:8px;
  height:8px;
  border-radius: 4px;
  background: #fca3a8;
  transition: width 100ms;
}
  .isActive{
    display: inline-block;
    width: 16px;
    height: 8px;
    border-radius: 4px;
    background: #e96f72;
    transition: width 200ms;
  }
</style>
